<template>
	<view class="agentIndexWxPage">
		<view v-if="hasData">
			<view class="cu-card">
				<view class="cu-item shadow cardContainer">
					<view class="flex align-center">
						<view class="flex-sub">
							<view class="text-lg">代理商：{{ agentInfo.Name || '' }}</view>
							<view class="text-gray">代理商手机号：{{ agentInfo.Tel || '' }}</view>
						</view>

						<view><text class="cuIcon-qrcode" style="font-size: 52rpx;" @click="openCodeModal"></text></view>
					</view>
				</view>
			</view>
			<view class="gridContainer">
				<view class="nav-list">
					<navigator
						hover-class="none"
						:url="'/agentPages/agent/' + item.url"
						class="nav-li"
						navigateTo
						:class="'bg-' + item.color"
						v-for="(item, index) in elements"
						:key="index"
					>
						<view class="nav-title">{{ item.title }}</view>
						<!-- <view class="nav-name">{{ item.name }}</view> -->
						<text :class="'cuIcon-' + item.cuIcon"></text>
					</navigator>
				</view>
			</view>
		</view>
		<view v-else></view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	onLoad(obj) {
		console.log(obj);
		this.elements = [
			{
				title: '门店粉丝',
				url: 'agentFansList',
				color: 'blue',
				cuIcon: 'friendfavor'
			}
		];
		this.hasData = true;
	},
	data() {
		return {
			hasData: false,
			agentInfo: {},
			elements: []
		};
	},
	methods: {
		...mapActions({
			getOpenIdH5: 'mp/getOpenIdH5'
		})
	}
};
</script>

<style lang="less">
page {
	background-color: #eeeeee;
}
.agentIndexWxPage {
	.cardContainer {
		margin: 16rpx;
		padding: 42rpx 16rpx;
	}

	.modalBtnContainer {
		margin: 12rpx 0;
		text-align: center;
	}
	.codeImgContainer {
		margin-top: 12rpx;
	}
}
</style>
